<template>
  <div>
    <van-nav-bar title="我的粉丝" left-arrow @click-left="onClickLeft" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in list" :key="index">
          <div id="list" @click="showHomepage(item.pid)">
            <div>
              <van-image
                round
                width="3rem"
                height="3rem"
                :src="item.headUrl"
                id="head"
              />
            </div>
            <div id="info">
              <van-row>{{ item.name }}</van-row>
              <van-row>{{ item.pid }}</van-row>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Edit",
  setup() {},
  data() {
    return {
      list: [],
      id: "",
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  mounted() {
    this.id = this.$route.params.uid;
    console.log(this.id);
    axios.get("/js/fans.json").then((res) => {
      var item = res.data.list;
      console.log(item);
      for (var i in item) {
        if (item[i].uid === this.id) {
          this.list = item[i].fans;
          return;
        }
      }
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    showHomepage(pid) {
      this.$router.push("/homepage/" + pid);
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        // for (let i = 0; i < 2; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        this.loading = false;

        // if (this.list.length >= 40) {
        //   this.finished = true;
        // }
      }, 1000);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad;
    },
  },
};
</script>

<style scoped>
#list {
  height: 60px;
  display: flex;
}
#head {
  padding-top: 10px;
}
#info {
  width: 300px;
  padding-top: 10px;
  margin-left: 10px;
}
</style>